<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <title>客户调查问卷</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        html, body {
            background-color: #fff;
            font-family: PingFangSC-Regular;
            padding-bottom: .30rem;
        }

        .title {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: .30rem .15rem 0 .15rem;
            border-bottom: .01rem dotted #666;
            color: rgb(58, 149,237);
            font-size: .22rem;
            font-weight: 700;
            height: .75rem;
        }

        .title .desc {
            margin-top: .15rem;
            font-size: .15rem;
            font-weight: 400;
            color: rgb(91, 91, 91);
            line-height: .15rem;
        }

        .questionnaire {
            display: flex;
            flex-direction: column;
            margin: .30rem .15rem 0 .15rem;
        }
        
        .questionnaire .phone {
            display: flex;
            flex-direction: column;
        }

        .questionnaire .questionnaire-title {
            font-size: .14rem;
            font-weight: 700;
            color: #333
        }

        .questionnaire .questionnaire-title .star {
            color: rgb(235, 50, 35);
            font-weight: 400;
        }

        .questionnaire .questionnaire-title .multiple {
            color: rgb(153, 153, 153);
        }

        .van-cell::after {
            border-bottom: none;
        }

        .questionnaire .phoneNum {
            margin-top: .08rem;
            border: .005rem solid #999;
            height: .35rem;
            width: 2.60rem;
        }

        .questionnaire .role {
            display: flex;
            flex-direction: column;
            margin-top: .25rem;
        }

        .checkbox {
            color: #333;
            font-size: .15rem;
            font-weight: 400;
            margin-top: .10rem;
        }

        .submit {
            margin: 0 auto;
            margin-top: .35rem;
            background-color: rgb(58, 149,237);
            height: .44rem;
            color: #fff;
            font-size: .16rem;
            line-height: .44rem;
            text-align: center;
            width: calc(100% - 1.5rem);
            border-radius: .22rem;
        }

        input {
            -webkit-appearance: none;
            padding: 0 .10rem;
            color: #333;
            font-size: .15rem;
        }

        .service-input {
            -webkit-appearance: none;
            margin-top: .08rem;
            padding: .10rem .10rem;
            border: .005rem solid #999;
            width: calc(100% - .30rem);
            height: 1.5rem;
            border: .005rem solid #999;
            color: #333;
            font-size: .15rem;
        }

    </style>
</head>
<body>
<div class="app" v-cloak>
    <div class="title">
        <div>客户调查问卷</div>
        <div class="desc">铁蟹网——机械设备一站式服务平台</div>
    </div>
    <div class="questionnaire">
        <div class="phone">
            <div class="questionnaire-title"><span class="star">*</span>1.请输入您的手机号码</div>
            <input class="phoneNum" type="tel" v-model="telphone">
        </div>
        <div class="role">
            <div class="questionnaire-title"><span class="star">*</span>2.您的角色？<span class="multiple">【多选题】</span></div>           
            <van-checkbox-group v-model="rolesCheckboxGroup" direction="vertical">
                <van-checkbox class="checkbox" :name="item.value" shape="square" v-for="(item, index) in roles" :key="index">{{item.value}}</van-checkbox>
            </van-checkbox-group>
        </div>
        <div class="role info">
            <div class="questionnaire-title"><span class="star">*</span>3.您比较关注哪一类信息？<span class="multiple">【多选题】</span></div>           
            <van-checkbox-group v-model="infosCheckboxGroup" direction="vertical">
                <van-checkbox class="checkbox" :name="item.value" shape="square" v-for="(item, index) in infos" :key="index">{{item.value}}</van-checkbox>
            </van-checkbox-group>
        </div>
        <div class="role service">
            <div class="questionnaire-title">4.您还希望铁蟹网给您提供哪一类服务？</div>
            <textarea class="service-input" name="" id="" cols="30" rows="10" v-model="advice"></textarea>
        </div>
    </div>
    <div class="submit" @click="submit">提交</div>
</div>
<script src="../../script/api.js"></script>
<script src="../../script/flexible.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/vue.min.js"></script>
<script src="../../script/iconfont.js"></script>
<script src="../../script/vant.min.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/restful.js"></script>
<script src="../../script/businessCommon.js"></script>
<script src="../../script/BigPicture.js"></script>
<script>
    apiready = function () {
        vm = new Vue({
            el: '.app',
            data: {
                telphone: '' ,
                advice: '',
                rolesCheckboxGroup: [],
                infosCheckboxGroup: [],
                roles: [{
                    key: 'driver',
                    value: '操作手/司机'
                },{
                    key: 'repair',
                    value: '维修人员'
                },{
                    key: 'responser',
                    value: '公司负责人'
                },{
                    key: 'logistics',
                    value: '物流商'
                },{
                    key: 'supplier',
                    value: '供应商'
                },{
                    key: 'project',
                    value: '甲方项目部'
                }],
                infos: [{
                    key: 'lease',
                    value: '设备租赁'
                },{
                    key: 'maintain',
                    value: '维修保养'
                },{
                    key: 'second-hand',
                    value: '二手材料租赁'
                },{
                    key: 'parts',
                    value: '配件买卖'
                },{
                    key: 'job',
                    value: '找工作'
                },{
                    key: 'operate',
                    value: '找机手/操作手'
                },{
                    key: 'project_info',
                    value: '项目信息'
                },{
                    key: 'logistics_transportation',
                    value: '物流运输'
                },{
                    key: 'loan',
                    value: '金融贷款'
                },{
                    key: 'other',
                    value: '其他'
                },],
            },
                
            mounted: function () {
                this.getUserInfo();
            },
            methods: {

                submit() {
                    console.log(this.rolesCheckboxGroup.length);
                    var error = '';
                    if (this.telphone.length <= 0) {
                        error = "请输入您的手机号码";
                    } else if (this.rolesCheckboxGroup.length <= 0) {
                        error = "请选择您的角色";
                    } else if (this.infosCheckboxGroup.length <= 0) {
                        error = "请选择关注信息";
                    } 

                    if (error.length > 0) {
                        toastMiddle(error);
                    } else {
                        var rolesStr = this.splicing(this.rolesCheckboxGroup);
                        var infosStr = this.splicing(this.infosCheckboxGroup);
                        var advice = this.advice;
                        var phoneNum = this.telphone;

                        mime('submitQuestionnaire')(phoneNum, rolesStr, infosStr, advice, function(ret) {
                            toastMiddle("提交成功");
                        })
                    }
                },

                 splicing(stringArray) {
                    var str = stringArray[0];

                    for (i=1; i<stringArray.length; i++) {
                        str = str + ',' + stringArray[i]
                    }

                    return str

                },

                getUserInfo() {
                    const vm = this;
                    fnGet(interfaces.USER_MODULE.GET_USER_INFO, {}, true, function (ret, err) {
                        console.log("@@:" + JSON.stringify(ret));
                        if (ret && ret.code === RESPONSE_OK) {
                            vm.telphone = ret.data.phone;
                        } else {
                            toastBottom(ret ? ret.msg : '');
                        }
                    });
                },
            },
        });



    }
</script>
</body>
</html>